<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Carte et itinéraire</title>
        <link rel="stylesheet" href="css/bootstrap.css" media="all">
        <link rel="stylesheet" href="css/spectrum.css" media="all">
        <link rel="stylesheet" href="css/mymap.css" media="all">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
        <script type="text/javascript" src="js/gmaps.js"></script>
        <script type="text/javascript" src="js/spectrum.js"></script>
    </head>
    <body>
        <div id="container">
            <div id="data">
                <h3>Emplacements</h3>
                <form id="form-data" action="#" method="post">
                    <div class="label-pt label-active">
                        <label>
                            <span>A</span>
                            <input type="text" id="input-a" class="input-text" data-pt="A" value="" name="input-a">
                        </label>
                        <select id="select-a" name="select-a">
                            <option value="0">Rando</option>
                            <option value="1">Avion</option>
                            <option value="2">Bateau</option>
                        </select><br>
                        <!--input type="text" id="color-a" class="color-picker" name="color-a"-->
                        Long : <input type="text" id="input-lng-a" class="longlat" data-pt="A" value="" name="input-lng-a">, 
                        Lat : <input type="text" id="input-lat-a" class="longlat" data-pt="A" value="" name="input-lat-a">
                    </div>
                    <br><br>
                    <div class="label-pt">
                        <label>
                            <span>B</span>
                            <input type="text" id="input-b" class="input-text" data-pt="B" value="" name="input-b">

                        </label>
                        <select id="select-b" name="select-b">
                            <option value="0">Rando</option>
                            <option value="1">Avion</option>
                            <option value="2">Bateau</option>
                        </select><br>
                        <!--input type="text" id="color-b" class="color-picker" name="color-b"-->
                        Long : <input type="text" id="input-lng-b" class="longlat" data-pt="B" value="" name="input-lng-b">, 
                        Lat : <input type="text" id="input-lat-b" class="longlat" data-pt="B" value="" name="input-lat-b">
                    </div>
                    <br><br>
                    <div class="label-pt">
                        <label class="label-pt">
                            <span>C</span>
                            <input type="text" id="input-c" class="input-text" data-pt="C" value="" name="input-c">
                        </label>
                        <select id="select-c" name="select-c">
                            <option value="0">Rando</option>
                            <option value="1">Avion</option>
                            <option value="2">Bateau</option>
                        </select><br>
                        <!--input type="text" id="color-c" class="color-picker" name="color-c"-->
                        Long : <input type="text" id="input-lng-c" class="longlat" data-pt="C" value="" name="input-lng-c">, 
                        Lat : <input type="text" id="input-lat-c" class="longlat" data-pt="C" value="" name="input-lat-c">
                    </div>
                    <br><br>
                    <div class="label-pt">
                        <label class="label-pt">
                            <span>D</span>
                            <input type="text" id="input-d" class="input-text" data-pt="D" value="" name="input-d">
                        </label>
                        <select id="select-d" name="select-d">
                            <option value="0">Rando</option>
                            <option value="1">Avion</option>
                            <option value="2">Bateau</option>
                        </select><br>
                        <!--input type="text" id="color-d" class="color-picker" name="color-d"-->
                        Long : <input type="text" id="input-lng-d" class="longlat" data-pt="D" value="" name="input-lng-d">, 
                        Lat : <input type="text" id="input-lat-d" class="longlat" data-pt="D" value="" name="input-lat-d">
                    </div>
                    <br><br>
                </form>

                <div id="segment-colors">
                    <table class="table table-condensed">
                        <tbody>
                            <tr>
                                <td>
                                    <button class="btn btn-block btn-xs btn-segment" pt1="a" pt2="b" segment="off" index="-1">Segment [AB]</button>
                                </td>
                                <td>
                                    <input type="text" class="color-picker" id="color-ab" value="">
                                </td>
                                <td>
                                    <button class="btn btn-block btn-xs btn-segment" pt1="b" pt2="c" segment="off" index="-1">Segment [BC]</button>
                                </td>
                                <td>
                                    <input type="text" class="color-picker" id="color-bc" value="">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <button class="btn btn-block btn-xs btn-segment" pt1="a" pt2="c" segment="off" index="-1">Segment [AC]</button>
                                </td>
                                <td>
                                    <input type="text" class="color-picker" id="color-ac" value="">
                                </td>
                                <td>
                                    <button class="btn btn-block btn-xs btn-segment" pt1="c" pt2="d" segment="off" index="-1">Segment [CD]</button>
                                </td>
                                <td>
                                    <input type="text" class="color-picker" id="color-cd" value="">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <button class="btn btn-block btn-xs btn-segment" pt1="a" pt2="d" segment="off" index="-1">Segment [AD]</button>
                                </td>
                                <td>
                                    <input type="text" class="color-picker" id="color-ad" value="">
                                </td>
                                <td>
                                    <button class="btn btn-block btn-xs btn-segment" pt1="b" pt2="d" segment="off" index="-1">Segment [BD]</button>
                                </td>
                                <td>
                                    <input type="text" class="color-picker" id="color-bd" value="">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div id="info">
                Emplacement du Point A
            </div>
            <div id="map"></div>
        </div>
        <script type="text/javascript">
            var map;
            var point = "input-a";
            var pointMarkers = new Array();
            pointMarkers[0] = 'a';
            pointMarkers[1] = 'b';
            pointMarkers[2] = 'c';
            pointMarkers[3] = 'd';
            pointMarkers['a'] = 0;
            pointMarkers['b'] = 1;
            pointMarkers['c'] = 2;
            pointMarkers['d'] = 3;
            $(function() {
                // Carte
                map = new GMaps({
                    el: '#map',
                    lat: -12.043333,
                    lng: -77.028333
                });

                // color picker
                $('#color-ab').spectrum({
                    flat: false,
                    showInput: true,
                    showInitial: true,
                    chooseText: "Sélectionner",
                    cancelText: "Annuler",
                    preferredFormat: "hex6",
                    showSelectionPalette: true,
                    localStorageKey: "spectrum.homepage",
                    clickoutFiresChange: true,
                    move: function(color) {
                        $('#color-ab').val(color.toHexString());
                    },
                    hide: function(color) {
                        $('#color-ab').val(color.toHexString());
                    }
                });
                $('#color-ac').spectrum({
                    flat: false,
                    showInput: true,
                    showInitial: true,
                    chooseText: "Sélectionner",
                    cancelText: "Annuler",
                    preferredFormat: "hex6",
                    showSelectionPalette: true,
                    localStorageKey: "spectrum.homepage",
                    clickoutFiresChange: true,
                    move: function(color) {
                        $('#color-ac').val(color.toHexString());
                    },
                    hide: function(color) {
                        $('#color-ac').val(color.toHexString());
                    }
                });
                $('#color-ad').spectrum({
                    flat: false,
                    showInput: true,
                    showInitial: true,
                    chooseText: "Sélectionner",
                    cancelText: "Annuler",
                    preferredFormat: "hex6",
                    showSelectionPalette: true,
                    localStorageKey: "spectrum.homepage",
                    clickoutFiresChange: true,
                    move: function(color) {
                        $('#color-ad').val(color.toHexString());
                    },
                    hide: function(color) {
                        $('#color-ad').val(color.toHexString());
                    }
                });
                $('#color-bc').spectrum({
                    flat: false,
                    showInput: true,
                    showInitial: true,
                    chooseText: "Sélectionner",
                    cancelText: "Annuler",
                    preferredFormat: "hex6",
                    showSelectionPalette: true,
                    localStorageKey: "spectrum.homepage",
                    clickoutFiresChange: true,
                    move: function(color) {
                        $('#color-bc').val(color.toHexString());
                    },
                    hide: function(color) {
                        $('#color-bc').val(color.toHexString());
                    }
                });
                $('#color-cd').spectrum({
                    flat: false,
                    showInput: true,
                    showInitial: true,
                    chooseText: "Sélectionner",
                    cancelText: "Annuler",
                    preferredFormat: "hex6",
                    showSelectionPalette: true,
                    localStorageKey: "spectrum.homepage",
                    clickoutFiresChange: true,
                    move: function(color) {
                        $('#color-cd').val(color.toHexString());
                    },
                    hide: function(color) {
                        $('#color-cd').val(color.toHexString());
                    }
                });
                $('#color-bd').spectrum({
                    flat: false,
                    showInput: true,
                    showInitial: true,
                    chooseText: "Sélectionner",
                    cancelText: "Annuler",
                    preferredFormat: "hex6",
                    showSelectionPalette: true,
                    localStorageKey: "spectrum.homepage",
                    clickoutFiresChange: true,
                    move: function(color) {
                        $('#color-bd').val(color.toHexString());
                    },
                    hide: function(color) {
                        $('#color-bd').val(color.toHexString());
                    }
                });

                // Mise en forme
                $('.label-pt').click(function() {
                    $('.label-active').removeClass('label-active');
                    $(this).addClass('label-active');
                    $(this).find('.input-text').click();
                });

                // Changement de Point
                $('.input-text, .longlat').click(function() {
                    var id = $(this).attr('id');
                    var pt = $(this).attr('data-pt');
                    console.log('Point ' + point + ' => ' + id);
                    point = id;
                    $('#info').html("Emplacement du Point <b>" + pt + "</b>");
                });

                // Ajouter ou Editer un marker
                GMaps.on('click', map.map, function(e) {
                    var index = map.markers.length;
                    var lat = e.latLng.lat();
                    var lng = e.latLng.lng();

                    var actual = getActualMarker();
                    var idx = getActualIndex(actual);
                    if (isMarker(map, idx)) {
                        // edition
                        var marker = map.markers[idx];
                        editMarker(marker, lng, lat);
                    } else {
                        // Nouveau
                        addMarker(map, lng, lat);
                    }
                });

                // Segment
                $('.btn-segment').click(function(e) {
                    e.preventDefault();
                    var pt1 = $(this).attr('pt1');
                    var pt2 = $(this).attr('pt2');
                    var segment = $(this).attr('segment');
                    var index = parseInt($(this).attr('index'));
                    if (segment == 'off') {
                        // A tracer
                        console.log("Tracer le Segment [" + pt1.toUpperCase() + pt2.toUpperCase() + "]")
                        index = drawLine(map, pt1, pt2);
                        $(this).attr('index', index);
                        $(this).attr('segment', 'on');
                    } else {
                        // A effacer
                        $(this).attr('segment', 'off');
                        removeLine(map, index);
                    }
                });
            });

            function addMarker(map, long, lat) {
                var index = map.markers.length;
                var icon = 'img/icon-' + getActualMarker() + '.png';
                var point = getActualMarker();
                map.addMarker({
                    lat: lat,
                    lng: long,
                    title: 'Point ' + point.toUpperCase(),
                    draggable: true,
                    icon: {
                        size: new google.maps.Size(32, 32),
                        url: icon
                    }
                });
                console.log("Ajout : Marqueur aux coordonnées : " + long + ", " + lat);
                setMarkerData(long, lat);
            }

            function editMarker(marker, long, lat) {
                marker.setPosition({
                    lat: lat,
                    lng: long
                });
                console.log("Edition Marker : Lng : " + long + ", Lat : " + lat);
                setMarkerData(long, lat);
            }

            function getActualMarker() {
                var alpha = point.substr(6, 1);
                return alpha;
            }

            function getActualIndex(alpha) {
                return pointMarkers[alpha];
            }

            function isMarker(map, index) {
                try {
                    if (map.markers[index])
                        return true;
                    else
                        return false;
                } catch (err) {
                    return false;
                }
            }

            function setMarkerData(long, lat) {
                var alpha = getActualMarker();
                $('#input-lng-' + alpha).val(long);
                $('#input-lat-' + alpha).val(lat);
            }

            function drawLine(map, pt1, pt2) {
                var linePath = [[parseFloat($('#input-lat-' + pt1).val()), parseFloat($('#input-lng-' + pt1).val())],
                    [parseFloat($('#input-lat-' + pt2).val()), parseFloat($('#input-lng-' + pt2).val())]];
                var color = $('#color-' + pt1 + '' + pt2).val();
                var index = map.polylines.length;
                console.log(index);
                //console.log(linePath);
                var ret = map.drawPolyline({
                    path: linePath,
                    strokeColor: color,
                    strokeOpacity: 0.6,
                    strokeWeight: 6
                });
                //console.log(ret);
                //alert("EndDrawLine");
                return index;
            }

            function removeLine(map, index){
                var polyline = map.polylines[index];
                polyline.setMap(null);
            }
        </script>
    </body>
</html>